<template>
  <div id="bg">
    <div id="logo">mysystem</div>
    <div id="login">
      <el-card class="box-card">
        <div id="form">
          <el-input v-model="username" placeholder="请输入内容"></el-input>
          <el-input
            placeholder="请输入密码"
            v-model="passwword"
            show-password
          ></el-input>
          <el-button type="primary">登陆</el-button>
        </div>
      </el-card>
    </div>
    <div id="clock">
      <div id="time">{{ time }}</div>
      <div id="date">{{ date }}</div>
    </div>
    <div id="copy">Copyright @ 2022 blibli liee.李凯网页版权归属 </div>
  </div>
</template>

<!-- //css -->
<style scoped>
#bg {
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0px;
  left: 0px;
  /* 渐变 */
  background-image: linear-gradient(90deg, cyan, rgb(249, 79, 249));
  background-size: 400%;
  animation: myanimation 10s infinite;
}
@keyframes myanimation {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 100%;
  }
}

#logo {
  color: aliceblue;
  font-size: 25px;
  font-weight: 800;
  text-transform: uppercase;
  position: absolute;
  left: 15%;
  top: 15%;
}
#login {
  top: 30%;
  position: absolute;
  left: 38%;
}
.el-card {
  border-radius: 3%;
  width: 373px;
  height: 210px;
  background-color: rgba(255, 255, 255, 0.35);
  border: 0px;
}
#form {
  padding-bottom: 15px;
  line-height: 60px;
}
#clock{
    color: aliceblue;
    position:absolute;
    top: 70%;
    left: 15%;
    text-align: left;
}
#time{
    font-size: 100px;
}
#date{font-size: 35px;}
#copy{
    color:aliceblue;
    position:absolute;
    bottom: 5%;
    left: 0;
    right: 0;
    
}
</style>


<script>
export default {
  data() {
    return {
      username: "",
      passwword: "",
      time: "",
      date: "",
    }
  },
  mounted() {
    this.$nextTick(() => {
      setInterval(this.update_clock, 1000);
    });
  },
  methods: {
    update_clock:function (e) {
        var d =new Date();
      var year = d.getFullYear();
      if (year < 10) {
        year = "0"+year;
      }
      var mon = d.getMonth()+1;
      if (mon < 10) {
        mon = "0" + mon;
      }
      var day = d.getDate();
      if (day<10) {
        day = "0" + day;
      }
      var hour = d.getHours();
      if (hour < 10) {
        hour = "0" + hour;
      }
      var minute = d.getMinutes();
      this.time = hour + ":" + minute;
      this.date = year + "/" + mon + "/" + day;
    },
  },
};
</script>